<template>
	<view class="classify">
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-content">
				<!-- 在uni-app官网找的图标 -->
				<uni-icons type="search" size="26" color="#9F9F9F"></uni-icons>
				<text>搜索蔬菜</text>
			</view>
		</view>

	</view>
	<!-- 分类部分 -->
	<view class="cate-container">
		<view class="cate-left">
			<view class="cate-item" :class="{'active':selIndex==index}" @tap="selIndex=index"
				v-for="(item,index) in cateList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="cate-right">
			<view class="cate-content">
				<view class="item" v-for="(item,index) in selGoodList" @tap="nav(item.id)" :key="index">
					<view class="img">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="textbox">
						<view class="name"><text>{{item.name}}</text></view>
					<view class="info">
						<text>￥{{item.price}}元</text>
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>


<script setup>
	import {
		ref,
		watch,
		onBeforeMount
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const cateList = ref([])
	const selIndex = ref(0)
	const selGoodList = ref([])

	onBeforeMount(async () => {
		await getGoodTypeList()
		await getGoodsByType(cateList.value[selIndex.value].id)
	})

	// 点击后跳转详情页面
	function nav(id) {
		console.log("点击了:" + id)
		uni.navigateTo({
			url: "/pages/indexDetails/indexDetails?id=" + id
		})
	}
	onShow(async () => {
		const id = uni.getStorageSync("cateid")
		if (id == void[0]) return
		if (cateList.value.length === 0) {
			await getGoodTypeList()
		}
		for (let i = 0; i < cateList.value.length; i++) {
			if (cateList.value[i].id === id) {
				selIndex.value = i
				break
			}
		}
	})

	watch(selIndex, () => {
		getGoodsByType(cateList.value[selIndex.value].id)
	})

	async function getGoodTypeList() {
		const data = await uni.$get("/list/goodTypeList")
		cateList.value = data.data
	}

	async function getGoodsByType(type) {
		const data = await uni.$get("/list/goodList?type=" + type)
		selGoodList.value = data.data
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.classify {
		background-color: #fff;
	}

	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.search-content {
		width: 90%;
		height: 70rpx;
		margin: auto;
		border: 1px solid #E6E6E6;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9F9F9F;
	}

	text {
		margin-left: 10rpx;
	}

	.cate-container {
		width: 100%;
		height: 1200rpx;
		display: flex;
	}

	.cate-left {
		width: 200rpx;
		background-color: #F6F6F6;
	}

	.cate-item {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.active {
		background-color: #dcdcdc;
		position: relative;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.cate-right {
		flex: 1;
		background-color: #dadada;
	}

	.cate-content>.item {
		position: relative;
		margin-top: 10rpx;
		width: 550rpx;
		height: 180rpx;
		border: 1rpx;
		border-radius: 10rpx;
		box-shadow: 3px 3px 3px #eee;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: white;
	}

	.cate-content>.item>.img {
		position: absolute;
		left: 15rpx;
		width: 200rpx;
		height: 150rpx;
		border: 1rpx solid darkgray;
		border-radius: 10rpx;
	}

	.cate-content>.item>.img>image {
		width: 100%;
		height: 100%;

	}

	.cate-content>.item>.name {
		color: grzy;
	}

	.cate-content>.item .textbox{
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-end;
		margin-right: 30rpx;
	}
	
	.info {
		color: red;
		font-weight: bold;
		margin-left: 20rpx;

	}
</style>